<template>
  <RChartBox v-bind="$attrs" :option="option" :aspect-ratio="2"></RChartBox>
</template>

<script setup>
import { RChartBox } from '@/components/custom/index.js';
import { computed } from 'vue';

defineOptions({
  inheritAttrs: false
});

const props = defineProps({
  data: { type: Array, default: () => [] },
  min: { type: Number, default: 0 },
  max: { type: Number, default: 100 }
});

const option = computed(() => {
  const lineWidth = 8;

  return {
    series: [
      {
        type: 'gauge',
        min: props.min,
        max: props.max,
        radius: '90%',
        progress: {
          show: true,
          width: lineWidth
        },
        splitLine: {
          show: false
        },
        axisLine: {
          lineStyle: {
            width: lineWidth
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          distance: -4,
          fontSize: 10
        },
        pointer: {
          keepAspect: true,
          width: 4,
          length: '80%'
        },
        title: {
          fontSize: 12,
          offsetCenter: [0, '70%']
        },
        detail: {
          valueAnimation: true,
          fontSize: 16,
          offsetCenter: [0, '50%']
        },
        data: props.data
      }
    ]
  };
});
</script>
